<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style:none;
		}
		.zuo ul li{
			float: left;
			height: 50px;
			line-height: 50px;
			text-align: center;
			width: 100%;
		}
		.box{
			width: 400px;
			height: 300px;
			border: 1px solid #000;
		}
		.zuo{
			width: 100px;
			height: 300px;
			float: left;
			border-right: 1px solid #000;
		}
		.you{
			width: 290px;
			height: 300px;
			float: left;
			position: relative;

		}
		.you>div{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		.you>div ul li{
			width: 33%;
			float: left;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-bottom: 1px solid #000;
		}
		.you>div div{
			position: relative;
		}
		.you>div div li{
			width: 100%;
			height: 100%;
			line-height: 250px;
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
			display: none;
		}
		.show{
			display: block !important;
		}
		.pink{
			background-color: pink !important;
		}
    </style>
    <body>
    <div class="box">
    	<div class="zuo">
    		<ul>
    			<li class="pink">1</li>
    			<li>2</li>
    			<li>3</li>
    		</ul>
    	</div>
    	<div class="you">
    		<div class="one show">
    			<ul>
    				<li class="pink">1</li>
    				<li>2</li>
    				<li>3</li>
    			</ul>
    			<div>
    				<li class="show">一</li>
    				<li>二</li>
    				<li>三</li>
    			</div>
    		</div>
    		<div class="two">
    			<ul>
    				<li class="pink">1</li>
    				<li>2</li>
    				<li>3</li>
    			</ul>
    			<div>
    				<li class="show">一</li>
    				<li>二</li>
    				<li>三</li>
    			</div>
    		</div>
    		<div class="two">
    			<ul>
    				<li class="pink">1</li>
    				<li>2</li>
    				<li>3</li>
    			</ul>
    			<div>
    				<li class="show">一</li>
    				<li>二</li>
    				<li>三</li>
    			</div>
    		</div>
    	</div>
    	</div>
    </body>
</html>
	<script src="js/jquery.min.js"></script>
	<script>
		$(".zuo li").click(function() {
			var index = $(this).index();
			$(this).addClass('pink').siblings().removeClass('pink');
			$(".you>div").eq(index).addClass('show').siblings().removeClass('show');
		});
		$(".you>div ul li").click(function() {
			var index = $(this).index();
			$(this).addClass('pink').siblings().removeClass('pink');
			$(this).parent().siblings("div").children().eq(index).addClass('show').siblings().removeClass('show');
		});
	</script>